<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">项目管理</span>
			<span class="h2">报销冲抵</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content " style="margin-bottom: 20px;">
				<div class="clearfix">
					<p class="fl titles">报销冲抵</p>
					<el-button type="primary" size="small" @click="Reim()" style='margin-top: 5px; margin-left: 10px;'>新建</el-button>
					<label for="">工程项目:</label>
					<el-select v-model="proValue1" placeholder="请选择" filterable @change='change'>
						<el-option v-for="item in project" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<!--<label for="">行政区域:</label>
					<el-cascader :options="regions" v-model="region" separator='-' @change="handleItemChange" change-on-select filterable clearable></el-cascader>-->
					<div class="fr" >
						<!--<el-input v-model="search" placeholder="请输入关键词" style="width:217px;"></el-input>-->
						<el-button type="primary" @click="fnSearch">查询</el-button>
					</div>
				</div>
			</div>
			<el-table :data="Datas" border style="width: 100%">
				<el-table-column prop="ProjectStr" label="工程项目"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="PayBillCode" label="单据号"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="QS" label="期数"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Memo" label="原因"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Money" label="报销总额"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="CreateMan" label="创建人"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Hans" label="所属镇"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="CreateDate|yy" label="创建时间" >
					<template slot-scope="scope">
						{{scope.row.CreateDate|yy}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="small" type="danger" @click='del(scope.row.ID)' v-if='usertype'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		
		<el-dialog title="报销明细" :visible.sync="lands1" width="650px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="Bill">
				  <el-form-item label="单据号:">
				    <el-input v-model="Bill.num" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="报销总额:">
				    <el-input v-model="Bill.sumMoney" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="日 期:">
				    <el-input v-model="Bill.data" :disabled="true"></el-input>
				  </el-form-item>
				</el-form>
			</div>
			<div style="height: 200px;overflow-y: auto; margin-top: 15px;">
			<el-table :data="Datas1" border style="width: 100%">
				<el-table-column
                type="index"
                width="50">
              </el-table-column>
					<el-table-column prop="MainName" label="姓名">
					</el-table-column>
					<el-table-column prop="RegionName" label="行政区域">
					</el-table-column>
					<el-table-column prop="LevyCategoryStr" label="征收项目" >
					</el-table-column>
					<el-table-column prop="SumMoney" label="金额">
					</el-table-column>
			</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="lands1 = false">取 消</el-button>
			    <el-button type="primary" @click="lands1 = false">确 定</el-button>
		    </span>
		</el-dialog>
		<el-dialog title="新建报销冲抵" :visible.sync="trams" width="428px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="Bill">
				  <el-form-item label="工程项目:">
				    <el-select v-model="proValue" placeholder="请选择" filterable style='width: 308px;' @change='chand'>
						<el-option v-for="item in project" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
				  </el-form-item>
				  <el-form-item label="单据号:">
				    <el-input v-model="Bill.num" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="冲抵原因:">
				    <el-input v-model="Bill.memo" type="textarea" :rows="2"></el-input>
				  </el-form-item>
				  <el-form-item label="冲抵金额:">
				    <el-input v-model="Bill.money"></el-input>
				  </el-form-item>
				  <el-form-item label="期数:" >
				    <el-select v-model="qs" placeholder="请选择当前报销未打印的期数"  class='s'  style='width: 308px;' @change='qschang'>
						<el-option v-for="item in qsList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="trams = false">取 消</el-button>
			    <el-button type="primary" @click="trues">确 定</el-button>
		    </span>
		</el-dialog>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "Reimbursement",
  data() {
    return {
    	trams:false,
      reim: false,
      loading: false,
      labelPosition: "left",
      lands1: false,
      pages: 1, //分页页码
      total: 1, //条数
      search: "",
      Datas: [],
      Bill: {},
      Datas1: [],
      project:[],
      project1:[],
      proValue:"",
      proValue1:"",
      Bill:{
      	num:'',
      	memo:"",
      	money:''
      },
      qsList:[],
      qs:'',
      pages: 1, //页码
      total: 1, //总条数
      regions: [], //当前选择区域值
	  region: [],
	  pagss:1,
	  usertype:false,
    };
  },
  created() {
  	this.usertype = sessionStorage.ProjectID === '00000000-0000-0000-0000-000000000000' && sessionStorage.UserType== '1' ? true :false
  	
  	this.zList()
  	this.zList1()
  },
  methods: {
  	handleItemChange() {
                    
            },
  	//获取列表
  	getlistwp(pages,pid,rid,search){
  		this.loading = true
  		this.$post(api.getlistwp,{
		  "Para": {
		    "ProjectID":pid,
		    "RegionID": rid,
		    "KeyWork": search
		  },
		  "PageSize": 10,
		  "PageIndex": pages-1,
		  "OrderString": "",
		  "ToExcel": false
		}).then(res=>{
			if (res.isOK == true && res.state == 200) {
            this.loading = false;
            this.Datas = res.Data.Data;
            this.total = res.Data.Items ? res.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(res.msg);
          }
		})
  	},
    //工程项目列表
	zList() {
		this.$post(api.getlistde).then(response => {
			if(response.isOK == true && response.state == 200) {
				this.project1 = response.Data;
				this.proValue1=this.project1?this.project1[0].ID:''
				this.getlistwp(this.pages,this.proValue1,this.region[this.region.length-1],this.search)
			} else {
				this.loading = false;
				this.$message.error(response.msg);
			}
		}).catch((error) => {
			this.loading = false;
		})

	},
	//工程项目列表
	zList1() {
		this.$post(api.getlistde).then(response => {
			if(response.isOK == true && response.state == 200) {
				this.project = response.Data;
				this.loading = false;
				this.proValue = this.project[0].ID
				console.log(this.proValue)
				this.paymaster()
			} else {
				this.loading = false;
				this.$message.error(response.msg);
			}
		}).catch((error) => {
			this.loading = false;
		})

	},
	change() {
		this.anonymousget(this.proValue1)
	},
	//获取行政区域
	anonymousget(val) {
		this.regions = [];
		this.region = [];
		if(!val) {
			return false;
		}
		this.$get(api.anonymousget + "/" + val).then(response => {
			if(response.data.isOK == true && response.data.state == 200) {
				for(var i = 0; i < response.data.Data.length; i++) {
					this.regions.push({
						label: response.data.Data[i].RegionName,
						value: response.data.Data[i].ID,
						ParentID: response.data.Data[i].ParentID
					});
				}
				console.log(this.regions)
				this.regions = this.$toTree(this.regions);
				this.region.push(this.regions[0].value);
				this.vals=this.getCascaderObj(this.region, this.regions);
			} else {
				this.$message.error(response.data.msg);
			}
		}).catch((error) => {
			this.loading = false;
		})
	},
	handleCurrentChange(val){
		this.pages = val
		this.getlistwp(this.pages,this.proValue1,this.region[this.region.length-1],this.search)
	},
	fnSearch(){
		this.pages=1
		this.getlistwp(this.pages,this.proValue1,this.region[this.region.length-1],this.search)
	},
	chand(){
		this.qs=''
		this.paymaster()
	},
	qschang(){
		this.pagss = this.qs
		this.paymaster()
	},
	uq(array) {
		console.log(1)
		//将array数组转换成set对象,再使用Array.from()方法将set对象转换成数组
		return Array.from(new Set(array));
	},
	//表头
	paymaster() {
		this.qsList=[]
		this.$post(api.paymaster, {
			"Para": {
			    "RegionID": sessionStorage.RegionID,
			    "ProjectID": this.proValue
			 },
			PageSize: 1,
			PageIndex: this.pagss-1,
			OrderString: "",
			ToExcel: false
		})
		.then(response => {
			if(response.isOK == true && response.state == 200) {
				this.PageSize = response.Data.Pages;
				if(response.Data.Data.length > 0) {
					console.log(response)
					this.Bill.num = response.Data.Data[0].BillCode
					this.stage = response.Data.Data[0].BillDate
					for(var i = 1;i<=response.Data.Pages;i++){
						this.qsList.push({
							label:'第'+i+'期',
							value:i
						})
					}
//					console.log(this.qsList)
//					this.qsList = this.qsList.reduce((preVal, curVal) => {
//						hash[curVal.value] ? '' : hash[curVal.value] = true && preVal.push(curVal); 
//						return preVal 
//					}, [])
//					console.log(this.qsList)
//					this.qs = this.qsList[this.qsList.length-1].value
//					this.pagss = this.qs
//					this.paymaster()
					console.log(this.qs)
				} else {
					this.$message.error('没有数据');
				}
			} else {
				this.$message.error(response.msg);
			}
		})
		.catch(error => {});
	},
    Reim() {
    	this.qsList=[]
    	this.qs=''
    	this.zList1()
    	this.Bill.num=''
      	this.Bill.memo=""
      	this.Bill.money=''
        this.trams = true
    },
    trues(){
    	if(this.Bill.num==''||this.Bill.memo==''||this.proValue==""||this.Bill.money==''||this.qs==''){
    		this.$message.error("参数不能为空");
            return;
    	}
    	this.$post(api.addwp,{
		  "PayBillCode":this.Bill.num,
		  "ProjectID": this.proValue,
		  "Memo": this.Bill.memo,
		  "Money": this.Bill.money,
		  "QS": this.qs,
		  "ID": "",
		  "CreateMan": "",
		  "CreateDate": "",
		  "State": ''
		}).then(res=>{
			console.log(res)
			if(res.state==200){
				this.pages=1
				this.getlistwp(this.pages,this.proValue1,this.region[this.region.length-1],this.search)
				this.trams = false
			}else{
				this.trams = false
				this.$message.error(res.msg);
			}
		})
    },
    //删除
    del(id){
    	this.$confirm("将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$get(api.deletewp + "/" + id)
            .then(response => {
              if (response.data.isOK == true && response.data.state == 200) {
                this.loading = false;
                this.getlistwp(this.pages,this.proValue1,this.region[this.region.length-1],this.search)
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.loading = false;
                this.$message.error(response.data.msg);
              }
            })
            .catch(err => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
.asds {
  position: relative;
  z-index: 9999;
}
.s .el-input__inner{
	background: rgb(245, 108, 108) !important;
}
</style>